<template>
    <el-dialog
        :title="title"
        :visible.sync="visible"
        width="600px"
        :before-close="handleClose">
           <el-form ref="formData" :rules="rules" :model="formData" label-width="100px" label-position="right" style="width:450px" status-icon>
                <el-form-item label="用户名:" prop="username" maxlength="30">
                    <el-input v-model="formData.username"></el-input>
                </el-form-item>
                <el-form-item label="昵称:" prop="nickName">
                    <el-input v-model="formData.nickName" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" prop="mobile">
                    <el-input v-model="formData.mobile"  maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="email" maxlength="50">
                    <el-input v-model="formData.email"></el-input>
                </el-form-item>
                <!-- 账号过期 -->
                <el-form-item label="账号过期:" prop="isAccountNonExpired">
                    <el-radio-group v-model="formData.isAccountNonExpired" style="width:300px">
                        <el-radio :label="1" border>正常</el-radio>
                        <el-radio :label="0" border>已过期</el-radio>
                    </el-radio-group>
                </el-form-item>

                 <!-- 密码过期 -->
                <el-form-item label="密码过期:" prop="isCredentialsNonExpired">
                    <el-radio-group v-model="formData.isCredentialsNonExpired" style="width:300px">
                        <el-radio :label="1" border>正常</el-radio>
                        <el-radio :label="0" border>已过期</el-radio>
                    </el-radio-group>
                </el-form-item>
                 <!-- 是否锁定 -->
                <el-form-item label="账号锁定:" prop="isAccountNonLocked">
                    <el-radio-group v-model="formData.isAccountNonLocked" style="width:300px">
                        <el-radio :label="1" border>未锁定</el-radio>
                        <el-radio :label="0" border>已锁定</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('formData')" size="mini">确定</el-button>
                    <el-button size="mini" @click="handleClose">取消</el-button>
                </el-form-item>
                </el-form>
        </el-dialog>
</template>

<script>
import * as api from "@/api/user"
export default {
     props:{
        title:{ //弹窗的标题
            type:String,
            default:''
        },
        visible:{ //弹出窗口，true就弹出
            type:Boolean,
            default:false
        },
        formData:{ // 表单提交的数据
            type:Object,
            default:{}
        },
        remoteClose:Function //父组件传过来的函数
    },
    data(){
        return {
            rules:{
                username:[
                    {required:true,message:"请输入用户名",trigger:"blur"},
                    {min:6,max:30,message:"长度在6到30个字符",trigger:"blur"}
                ],
                nickName:[
                    {required:true,message:"请输入用户名",trigger:"blur"},
                ],
                mobile:[
                    {required:true,message:"请输入手机号",trigger:"blur"}
                ],
                isAccountNonExpired:[
                    {required:true,message:"请选择状态",trigger:"change"}
                ],
                isCredentialsNonExpired:[
                    {required:true,message:"请选择状态",trigger:"change"}
                ],
                isAccountNonLocked:[
                    {required:true,message:"请选择状态",trigger:"change"}
                ]

            }
        }
    },
    methods:{
        //提交
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                    if (valid) {
                       //校验通过，提交表单数据
                       this.submitData()
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
            });
        },
        async submitData(){
            let res = null

            if(this.formData.id){
                res = await api.update(this.formData)
            }else{
                //密码与用户名一致
                this.formData.password = this.formData.username
                res = await api.add(this.formData)
            }

            if(res.code === 20000){
                this.$message({message:"保存成功",type:"success"})
                this.remoteClose()
            }else{
                this.$message({message:"保存失败",type:"error"})
            }
        },
        //关闭窗口
        handleClose(){
             //关闭前重置表单
            this.$refs['formData'].resetFields()
            //不可已通过this.visible = false来关闭
            this.remoteClose()
        }
    }
}
</script>